<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表界面</title>
    <script src="/static/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<body>
<table class="layui-hide" id="testTwo" lay-filter="testTwo"></table>
<script>
    var $, table;
    layui.use('table', function () {
        table = layui.table;
        $ = layui.jquery;
        table.render({
            elem: '#testTwo'
            , url: ''
            , data: getUserList()
            , toolbar: '#toolbarDemo'
            , title: '数据表'
            , height: 'full-20' //高度最大化减去差值
            , totalRow: true
            , parseData: function (res) { //res 即为原始返回的数据
                console.log(res + "------");
                return { //参考response的定义
                    "code": 0, //解析接口状态
                    "msg": "ok", //解析提示文本
                    "total": res.length, //解析数据长度
                    "rows": res //解析数据列表
                };
            }
            , cols: [
                [
                    {type: 'numbers', fixed: 'left', rowspan: 2}
                    , {field: 'id', title: 'ID', width: 10, hide: true, rowspan: 2}
                    , {field: 'id', title: 'id', rowspan: 2}
                    , {field: 'username', title: '名称', rowspan: 2}
                    , {field: 'mobile', title: '手机号', rowspan: 2}
                    , {
                    field: 'status', title: '状态', rowspan: 2, templet: function (d) {
                        if (d.status == 0) {
                            return "开启";
                        } else {
                            return "禁止";
                        }
                    }
                }
                    , {field: 'username_cn', title: '英文名', rowspan: 2}
                    , {field: 'wxid', title: '微信ID', rowspan: 2}
                    , {field: 'last_login_time', width: 160,title: '上次登录时间', rowspan: 2}
                ]
            ]
            , response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                , statusCode: 0 //规定成功的状态码，默认：0
                , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                , countName: 'total' //规定数据总数的字段名称，默认：count
                , dataName: 'rows' //规定数据列表的字段名称，默认：data
            }
            , page: true
            , limit: 10
            , limits: [5, 10, 20, 30]
            , id: 'singleDevicesTable'
        });

        //监听行双击事件
        table.on('rowDouble(testTwo)', function (obj) {
            console.log(obj.data) //得到当前行数据
        });
    });
    function getUserList() {
        var data = [];
        const token = localStorage.getItem("token");
        $.ajax({ //异步请求 查询用户列表数据
            url: "{:url('/admin/user/userList')}",
            type: 'POST',
            data: {},
            dataType: 'json',
            headers: {'Authorization': token},  //token
            success: function (d) {
                layer.msg(d.msg);
                    data = d.data;
                    table.reload('singleDevicesTable', {  //表格重载
                        data: data
                    });
            },
            error: function (e) {
                layer.close(index);
                layer.msg("登录失败");
            }
        });
    }
</script>

</body>
</html>